So, if you access your website from a smartphone or tablet or large desktop then your website will adjust itself to that screen size! Pretty cool.
When you click (and hold) the mouse on the edge of a browser window you can adjust its width.
By doing this you can see if a website is responsive by whether or not it adjusts itself to the new dimensions.
Bootstrap helps with the responsive website design coding.
What does responsive mean?
In web development responsive refers to a website that automatically adjust its width to fit the device that is accessing it!
We want you to experience what we mean by responsive.
Clicking on a button below will create a pop up window.
After the window pops up, click and hold on the edge of the browser window and SLOWLY drag the mouse to widen the window.
Notice how the website changes!
What are some things you noticed?
This is called responsive web design.
When you understand this slide, Click the RIGHT ARROW to move on!
Bootstrap
Click Here For Video Review
Boostrap is nothing more than a CSS file with a ton of already created classes! It's huuuuuge!
Bootstrap Layout:
Bootstrap is used by tons of companies to keeps things simple.
This slide will show you lots of examples! Just keep scrolling down to see them all!
Bootstrap breaks your web page down into a grid of 12 columns, like the image below.
Bootstrap Website:
Here's an example with actual content, read the labels to get an idea of the layout:
Bootstrap Chart:
Now get this.
You can define how many columns your content spans based on the size of the screen the person is viewing your website on.
So on a large desktop your logo, for example, could take up 4 columns but on a phone you could tell it take up 12 columns!
Bootstrap breaks the various screen sizes into five groups: Extra small (phones), Small (tablets), Medium (desktops), Large (large desktops) & X-Large (extra large desktops).
Take a look at the chart below, after this we'll show you how actual code would look!
Bootstrap with HTML:
Bootstrap classes are already created you just reference them! In the next slide you'll see how to pull in the bootstrap css.
The div tag is most commonly used to divide your page into it's sections.
You'll add the needed class names to the div tags that will define their column widths!
See below:
<div class="container"> <div class="row"> <div class="col-12 col-sm-4"> I take up 4 columns on screens 'sm' and larger and 12 columns on 'xs' screens (notice from the chart above you just do col-#)! </div> <div class="col-12 col-sm-8"> I take up 8 columns on screens 'sm' and larger and 12 columns on 'xs' screens (notice from the chart above you just do col-#)! </div> </div>>!-- end row div<--> </div>>!-- end container div<-->
Here's a few bullet points to notice about the code above!
Notice the different class attributes on the div tags (container, row, col-#, col-sm-#)!
ALL your bootstrap rows will belong to a single container class (notice it's the last closing div in the series)!
Inside the container class you'll add a bootstrap row class.
You can add multiple class values to a class attribute by just separating them out by a space.
Similar column types, like col-sm-# or col-lg-#, need to add up to 12 within a single row!
When you understand this slide, Click the RIGHT ARROW to move on!
Bootstrap Link
Click Here For Video Review
You may be wondering (and if you're not, then you should be!).
So how do does your HTML file gain access to all the great bootstrap CSS classes?
Think back to the last website you coded.
How did you link it to your main.css file?
With bootstrap it's the same way, they have a link ready for anyone to use, see below!
Sorry it's so small, had to make it fit in this space!
Click the button 'Run the Code' again and now see what it looks like!
Before moving on, look at the code and notice a few things:
Line 6 is the mandatory container class.
The container class ends on line 33.
A row begins on line 7 and ends on line 19.
Another row begins on line 20 and ends on line 32.
The first row has two columns, notice their span widths.
The second row has two columns, notice their span widths.
Since the output is super small (less than a phone). We used the col-#.
Bootstrap has a lot of classes, we won't be able to go over all of them in this course.
But we will be able to go over many of them and give you the understanding of how everything works.
To see all the different classes bootstrap has to offer you can visit their website.
When you understand this slide, Click the RIGHT ARROW to move on!
Activity
Click Here For Video Review
This Activity will walk you through:
Starting your responsive website code.
Adding a row for your logo.
Read the next lines carefully!
Create a new folder in your coding workspace named Responsive
To create a new folder, Right Click and select New > Folder.
Open a new file in your Text Editor, select File > New File
Save your new file as index.html to your Responsive folder created in step one.
index.html is always the name of the main page in a website.
Copy the HTML Skeleton into your new file. Use the hint below, notice the bootstrap link is already in there!
Notice the link between the <head> tags.
It links your file to bootstraps css.
Between your body tags create an opening and closing div tag that has a class value of container.
A container is always the first class you'll create with bootstrap and all your code will go between those brackets.
Hint<body> <div class="container">
</div><!-- end container div --> </body>
Only add the code in bold.
Notice the comment tag labeling the end of the container div!
Between the div tags with class value container, add an opening and closing div tag with a class value of row.
Hint<div class="container">
<div class="row">
</div> <!-- end logo row -->
</div><!-- end container div -->
Only add the code in bold.
Don't re-copy the container div, just the row div.
Between the div tags that create your logo row, add a div tag to always span four rows with an id of logo. Also, add the word LOGO between your div tags with id logo.
Hint<div class="container">
<div class="row">
<div class="col-sm-4"id="logo">
LOGO </div> </div> <!-- end logo row -->
</div><!-- end container div -->
Only add the code in bold. "col-sm-4" makes it so this row will only take up 4 columns when on a phone, since there are no other classes attached it will only take up 4 columns on all devices larger than a phone too.
Not much to see yet. The next lesson you'll start adding content!
Open this --CHECKPOINT-- if you want to compare your code.
<html> <head> <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title> Comment Post </title> </head> <body> <div class="container">
<div class="row"> <div class="col-sm-4"id="logo">
LOGO </div> </div> <!-- end logo row -->
</div><!-- end container div --> </body> </html>
You won't see anything yet until you complete the next lesson!
